<template>
  <div class="procedure-container page-common-layout">
    <div class="procedure-header-container">
      <a-select
        showSearch
        :filter-option="filterOption"
        v-model="condition.tenantCode"
        :loading="projectLoading"
        placeholder="请选择项目"
        @change="changeProject($event)"
        class="project-select"
      >
        <a-select-option
          :value="item.proCode"
          v-for="item in projectSoucre"
          :key="item.uuid"
        >
          {{ item.proName }}
        </a-select-option>
      </a-select>
      <a-select
        showSearch
        :filter-option="filterOption"
        v-model="condition.orgCode"
        :loading="blockLoading"
        placeholder="请选择标段"
        @change="changeBlock($event)"
        class="project-select"
      >
        <a-select-option
          :value="item.orgCode"
          v-for="item in blockSoucre"
          :key="item.uuid"
        >
          {{ item.orgName }}
        </a-select-option>
      </a-select>
      <a-select
        allowClear
        showSearch
        :filter-option="filterOption"
        v-model="condition.unitWorks"
        :loading="unitLoading"
        placeholder="请选择单位工程"
        @change="changeUnit($event)"
      >
        <a-select-option
          :value="item"
          v-for="(item, index) in unitSoucre"
          :key="index"
        >
          {{ item }}
        </a-select-option>
      </a-select>
    </div>
    <div class="procedure-tag-container">
      <a-row>
        <a-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" :xxl="6" :xxxl="6">
          <div class="nav-item">
            <div class="title">单位工程已完成数/总数</div>
            <div>
              <span class="completed">{{
                numberSoucre.unitWorksComplete || 0
              }}</span
              ><span class="total"
                >/{{ numberSoucre.unitWorksNumber || 0 }}</span
              >
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" :xxl="6" :xxxl="6">
          <div class="nav-item">
            <div class="title">分部工程已完成数/总数</div>
            <div>
              <span class="completed">{{
                numberSoucre.divisionalWorksComplete || 0
              }}</span
              ><span class="total"
                >/{{ numberSoucre.divisionalWorksNumber || 0 }}</span
              >
            </div>
          </div>
        </a-col>
        <!-- <a-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" :xxl="4" :xxxl="4">
          <div class="nav-item">
            <div class="title">子分部工程已完成数/总数</div>
            <div>
              <span class="completed">{{
                numberSoucre.subDivisionalWorksComplete || 0
              }}</span
              ><span class="total"
                >/{{ numberSoucre.subDivisionalWorksNumber || 0 }}</span
              >
            </div>
          </div>
        </a-col> -->
        <a-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" :xxl="6" :xxxl="6">
          <div class="nav-item">
            <div class="title">分项工程已完成数/总数</div>
            <div>
              <span class="completed">{{
                numberSoucre.itemWorksComplete || 0
              }}</span
              ><span class="total"
                >/{{ numberSoucre.itemWorksNumber || 0 }}</span
              >
            </div>
          </div>
        </a-col>
        <!-- <a-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" :xxl="4" :xxxl="4">
          <div class="nav-item">
            <div class="title">子分项工程已完成数/总数</div>
            <div>
              <span class="completed">{{
                numberSoucre.subItemWorksComplete || 0
              }}</span
              ><span class="total"
                >/{{ numberSoucre.subItemWorksNumber || 0 }}</span
              >
            </div>
          </div>
        </a-col> -->
        <a-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" :xxl="6" :xxxl="6">
          <div class="nav-item">
            <div class="title">检验批已完成数/总数</div>
            <div>
              <span class="completed">{{
                numberSoucre.procedureItemComplete || 0
              }}</span
              ><span class="total"
                >/{{ numberSoucre.procedureItemNumber || 0 }}</span
              >
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
    <div class="procedure-tip-container">
      今日报验数量：{{
        toDaySoucre.inspectionTodayNumber || 0
      }}
      今日审批数量：{{ toDaySoucre.approvalTodayNumber || 0 }}
    </div>
    <div class="procedure-body-container">
      <a-empty v-if="cardSoucre.length == 0" />
      <a-row v-else :gutter="[14, 14]">
        <a-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="12"
          :xl="12"
          :xxl="6"
          :xxxl="6"
          v-for="(item, index) in cardSoucre"
          :key="index"
          @click="openDetail(item)"
        >
          <div class="card-item">
            <div class="title">
              <div :class="[checkStatusClass(item.progressStatus), 'state']">
                {{ item.progressStatus || "--" }}
              </div>
              <div class="text">{{ item.unitWords || "--" }}</div>
            </div>
            <div class="chart-container">
              <div class="chart-dom" :ref="'pie_' + index"></div>
              <div class="sideBar">
                <div class="sideBar-item">
                  <div class="label">单位工程</div>
                  <div class="value">
                    <span>{{ item.unitWorksComplete || 0 }}</span
                    >/{{ item.unitWorksNumber || 0 }}
                  </div>
                </div>
                <div class="sideBar-item">
                  <div class="label">分部工程</div>
                  <div class="value">
                    <span>{{ item.divisionalWorksComplete || 0 }}</span
                    >/{{ item.divisionalWorksNumber || 0 }}
                  </div>
                </div>
                <div
                  class="sideBar-item"
                  v-if="item.subDivisionalWorksNumber > 0"
                >
                  <div class="label">子分部工程</div>
                  <div class="value">
                    <span>{{ item.subDivisionalWorksComplete || 0 }}</span
                    >/{{ item.subDivisionalWorksNumber || 0 }}
                  </div>
                </div>
                <div class="sideBar-item">
                  <div class="label">分项工程</div>
                  <div class="value">
                    <span>{{ item.itemWorksComplete || 0 }}</span
                    >/{{ item.itemWorksNumber || 0 }}
                  </div>
                </div>
                <div class="sideBar-item" v-if="item.subItemWorksNumber > 0">
                  <div class="label">子分项工程</div>
                  <div class="value">
                    <span>{{ item.subItemWorksComplete || 0 }}</span
                    >/{{ item.subItemWorksNumber || 0 }}
                  </div>
                </div>
                <div class="sideBar-item">
                  <div class="label">工序</div>
                  <div class="value">
                    <span>{{ item.procedureItemComplete || 0 }}</span
                    >/{{ item.procedureItemNumber || 0 }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
    <!-- 详情 -->
    <detail
      :visible.sync="detailModalVisible"
      :soucre="dataSoucre"
      @cancel="cancelDetail()"
    ></detail>
  </div>
</template>

<script>
import echarts from "echarts";
import detail from "./components/detail";
import { getAllProListByQX, getAllQxSecs } from "@/api/common";
import {
  getUnitWorksSelect,
  getStatisticsNumber,
  getTodayNumebr,
  getUnitWordList,
} from "@/api/progressManage";
export default {
  components: {
    detail,
  },
  data() {
    return {
      condition: {
        //项目
        tenantCode: undefined,
        //标段
        orgCode: undefined,
        //单位工程
        unitWorks: undefined,
      },
      //项目
      projectLoading: false,
      projectSoucre: [],
      //标段
      blockLoading: false,
      blockSoucre: [],
      //单位工程
      unitLoading: false,
      unitSoucre: [],
      numberSoucre: {},
      toDaySoucre: {},
      cardSoucre: [],
      chartInstance: {},
      //详情
      detailModalVisible: false,
      dataSoucre: {},
    };
  },
  mounted() {
    this.getProjectData();
  },
  methods: {
    //打开详情页面
    openDetail(row) {
      let { unitWords } = row;
      let { tenantCode, orgCode } = this.condition;
      this.detailModalVisible = true;
      this.dataSoucre = {
        tenantCode,
        orgCode,
        unitWorks: unitWords,
      };
    },
    //关闭详情页面
    cancelDetail() {
      this.detailModalVisible = false;
      this.getNumberStatistics();
      this.getToDay();
      this.getCardData();
    },

    changeProject() {
      this.condition.orgCode = undefined;
      this.condition.unitWorks = undefined;
      this.getBlockData();
    },
    changeBlock() {
      this.condition.unitWorks = undefined;
      this.getData();
    },
    changeUnit() {
      this.getNumberStatistics();
      this.getToDay();
      this.getCardData();
    },
    //查询项目
    getProjectData() {
      this.projectLoading = true;
      return new Promise((resolve, reject) => {
        getAllProListByQX()
          .then((res) => {
            this.projectSoucre = res?.data ?? [];
            this.condition.tenantCode =
              this.projectSoucre?.[0]?.proCode ?? undefined;
            if (!this.condition.tenantCode) {
              return;
            }
            this.getBlockData();
            resolve();
          })
          .catch((_) => {
            this.projectSoucre = [];
            reject();
          })
          .finally((_) => {
            this.projectLoading = false;
          });
      });
    },
    //查询标段
    getBlockData() {
      this.blockLoading = true;
      let { tenantCode } = this.condition;
      return new Promise((resolve, reject) => {
        getAllQxSecs({ tenantCode, type: 4 })
          .then((res) => {
            this.blockSoucre = res?.data ?? [];
            this.condition.orgCode =
              this.blockSoucre?.[0]?.orgCode ?? undefined;
            if (!this.condition.orgCode) {
              return;
            }
            this.getData();
            resolve();
          })
          .catch((_) => {
            this.blockSoucre = [];
            reject();
          })
          .finally((_) => {
            this.blockLoading = false;
          });
      });
    },
    //查询单位工程
    getUnitData() {
      this.unitLoading = true;
      let { tenantCode, orgCode } = this.condition;
      return new Promise((resolve, reject) => {
        getUnitWorksSelect({
          tenantCode,
          orgCode,
        })
          .then((res) => {
            this.unitSoucre = res?.data ?? [];
            resolve();
          })
          .catch((_) => {
            this.unitSoucre = [];
            reject();
          })
          .finally((_) => {
            this.unitLoading = false;
          });
      });
    },
    //查询页面所有数据
    getData() {
      Promise.all([
        this.getUnitData(),
        this.getNumberStatistics(),
        this.getToDay(),
        this.getCardData(),
      ])
        .then((res) => {})
        .catch((_) => {})
        .finally((_) => {});
    },
    //查询头部统计
    getNumberStatistics() {
      let { tenantCode, orgCode, unitWorks = "" } = this.condition;
      return new Promise((resolve, reject) => {
        getStatisticsNumber({
          tenantCode,
          orgCode,
          unitWorks,
        })
          .then((res) => {
            let { data } = res;
            this.numberSoucre = data || {};
            resolve();
          })
          .catch((_) => {
            this.numberSoucre = {};
            reject();
          })
          .finally((_) => {});
      });
    },
    //查询今日数量
    getToDay() {
      let { tenantCode, orgCode, unitWorks = "" } = this.condition;
      return new Promise((resolve, reject) => {
        getTodayNumebr({
          tenantCode,
          orgCode,
          unitWorks,
        })
          .then((res) => {
            let { data } = res;
            this.toDaySoucre = data || {};
            resolve();
          })
          .catch((_) => {
            this.toDaySoucre = {};
            reject();
          })
          .finally((_) => {});
      });
    },
    //查询卡片
    getCardData() {
      let { tenantCode, orgCode, unitWorks = "" } = this.condition;
      return new Promise((resolve, reject) => {
        getUnitWordList({
          tenantCode,
          orgCode,
          unitWorks,
        })
          .then((res) => {
            let { data } = res;
            this.cardSoucre = data ?? [];
            this.cardSoucre.forEach((item, index) => {
              let colorList = [];
              if (item?.progressStatus.indexOf("进行") != -1) {
                colorList = ["#FF993F", "#EEEDEB"];
              } else if (item?.progressStatus.indexOf("完成") != -1) {
                colorList = ["#42C596", "#EEEDEB"];
              } else {
                colorList = ["#EEEDEB", "#EEEDEB"];
              }
              this.$nextTick((_) => {
                setTimeout(() => {
                  this.drawPieChar(
                    "pie_" + index,
                    Number(item?.progressRatio ?? 0),
                    colorList
                  );
                }, 300);
              });
            });
            resolve();
          })
          .catch((_) => {
            this.cardSoucre = [];
            reject();
          })
          .finally((_) => {});
      });
    },
    drawPieChar(refName, ratio = 0, colorList = []) {
      if (!refName) {
        return;
      }
      let chart_dom = this.$refs[refName];
      this.chartInstance[refName] && this.chartInstance[refName].dispose();
      let instance = echarts.init(chart_dom[0]);
      this.chartInstance[refName] = instance;
      let baseOpt = {
        series: [
          {
            name: "报验进度",
            type: "pie",
            radius: ["65%", "80%"],
            clockwise: false,
            avoidLabelOverlap: false,
            hoverOffset: 0,
            silent: true,
            itemStyle: {
              normal: {
                color: function(params) {
                  return colorList[params.dataIndex];
                },
              },
            },
            label: {
              normal: {
                show: true,
                position: "center",
                formatter: () => {
                  return `{value|${ratio}%}\n {name|报验进度}`;
                },
                rich: {
                  value: {
                    fontWeight: "bold",
                    fontSize: 24,
                    color: "#333333",
                  },
                  name: {
                    fontWeight: 400,
                    fontSize: 14,
                    color: "#8A9295",
                  },
                },
              },
            },

            data: [
              { value: ratio, name: "-" },
              { value: 100 - ratio, name: "-" },
            ],
          },
        ],
      };
      instance.setOption(baseOpt);
      //开启响应式
      window.addEventListener("resize", () => {
        instance.resize();
      });
    },
    //检验状态类名
    checkStatusClass(status) {
      switch (status) {
        case "进行中":
          return "warning";

        case "已完成":
          return "normal";

        default:
          return "default";
      }
    },
    //select 搜索过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

<style lang="less" scoped>
.procedure-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .procedure-header-container {
    background-color: @base-bg-color;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    /deep/.ant-input {
      width: 183px !important;
      margin-right: 16px;
    }
    /deep/.ant-select {
      margin-right: 16px;
      .ant-select-selection {
        &.ant-select-selection--single {
          width: 183px;
        }
        &.ant-select-selection--multiple {
          min-width: 183px;
        }
      }
    }
  }
  .procedure-tag-container {
    min-height: 104px;
    background-color: @base-bg-color;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 20px 0 10px;
    .nav-item {
      padding-left: 30px;
      overflow: hidden;
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        width: 1px;
        height: 38px;
        background: #ededed;
        transform: translateY(-50%);
      }
    }
    /deep/.ant-row {
      .ant-col:last-child {
        .nav-item::after {
          display: none;
        }
      }
    }
    .title {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #999999;
    }
    .completed {
      font-size: 36px;
      font-family: D-DIN;
      font-weight: bold;
      color: #3a5b99;
    }
    .total {
      font-size: 24px;
      font-family: D-DIN;
      font-weight: bold;
      color: #999da5;
    }
  }

  .procedure-tip-container {
    padding: 10px 0;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #3759a0;
  }
  .procedure-body-container {
    flex: 1;
    overflow: auto;
    overflow-x: hidden;
    position: relative;
    .card-item {
      cursor: pointer;
      display: flex;
      flex-direction: column;
      height: 252px;
      background-color: @base-bg-color;
      border-radius: 4px;
      box-sizing: border-box;
      .title {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 20px 20px 10px 20px;
        .state {
          margin-right: 10px;
          width: 48px;
          height: 24px;
          border-radius: 4px;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          &.normal {
            background: #42c596;
          }
          &.warning {
            background: #ff993f;
          }
          &.default {
            background: #e9ecf3;
            color: #4c495b;
          }
        }
        .text {
          flex: 1;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #4c495b;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
      .chart-container {
        flex: 1;
        display: flex;
        overflow: hidden;
        .chart-dom {
          height: 100%;
          width: 200px;
        }
        .sideBar {
          flex: 1;
          box-sizing: border-box;
          padding: 0px 20px 0px 0px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #8a9295;
          .sideBar-item {
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            .label {
              flex-shrink: 0;
            }
            .value {
              flex-shrink: 0;
              > span {
                color: #3759a0;
              }
            }
            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
      &:hover {
        box-shadow: 0px 16px 23px 1px rgba(55, 89, 160, 0.15);
      }
    }
    /deep/.ant-empty {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
